<template>
  <div class="container">
    <div id="cesiumContainer">
      <!-- <div id="cesiumxin" style="position: fixed; left: 0; z-index: 99">
        <a
          href="http://cesium.xin"
          style="color: aliceblue; text-decoration: none">
          cesium中文网 http://cesium.xin
        </a>
      </div> -->
    </div>
    <div id="getposition">
      <input type="button" value="x+" @click="change(0)" />
      <input type="button" value="x-" @click="change(1)" />
      <input type="button" value="y+" @click="change(2)" />
      <input type="button" value="y-" @click="change(3)" />
      <input type="button" value="z+" @click="change(4)" />
      <input type="button" value="z-" @click="change(5)" />
      <br />
      <input type="button" value="rx+" @click="rotate(0)" />
      <input type="button" value="rx-" @click="rotate(1)" />

      <input type="button" value="1" @click="changeStep(1)" />
      <input type="button" value="10" @click="changeStep(10)" />
      <input type="button" value="100" @click="changeStep(100)" />
      <br />
      <input type="button" value="vi" @click="changevisible()" />

      <div id="result" style="background: white"></div>
    </div>
  </div>
</template>

<script>
  // import Cesium from '../node_modules/cesium/';
  var Cesium = require("cesium/Cesium");
  export default {
    name: "ZTitles3DModelDemo",
    data() {
      return {
        // this.viewer: {},
        step: 10,
        x: 360.0,
        y: -920.0,
        z: -820.0,
        m: {},
        tileset: {},
        rotationNum: 0,
        viewer: {},
      };
    },
    mounted() {
      // var Cesium = Cesium;
      var terrainModels = Cesium.createDefaultTerrainProviderViewModels();
      this.viewer = new Cesium.Viewer("cesiumContainer", {
        timeline: false,
        animation: false,
        vrButton: true,
        infoBox: true, // 是否显示点击要素之后显示的信息
        sceneModePicker: false,
        infoBox: true,
        // scene3DOnly:true,
        // terrainProviderViewModels: terrainModels,
        // selectedTerrainProviderViewModel: terrainModels[1]  // Select STK high-res terrain
      });
      this.viewer.scene.globe.depthTestAgainstTerrain = false;
      var boundingSphere = new Cesium.BoundingSphere(
        Cesium.Cartesian3.fromDegrees(111.5652101, 38.70350851, 100.500143),
        143.6271004
      );
      this.viewer.homeButton.viewModel.command.beforeExecute.addEventListener(
        function(commandInfo) {
          // Fly to custom position
          this.viewer.camera.flyToBoundingSphere(boundingSphere);

          // Tell the home button not to do anything
          commandInfo.cancel = true;
        }
      );
      // Set custom initial position
      this.viewer.camera.flyToBoundingSphere(boundingSphere, {
        duration: 0
      });

      // Add tileset. Do not forget to reduce the default screen space error to 2
      // var origin = Cesium.Cartesian3.fromDegrees(-95.0, 40.0, 200000.0);
      // var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(origin);
      // var x = 360.0;
      // var y = -920.0;
      // var z = -820.0;
      // var x = 0;
      // var y = 0;
      // var z = 0;
      this.m = Cesium.Matrix4.fromArray([
        1.0,
        0.0,
        0.0,
        0.0,
        0.0,
        1.0,
        0.0,
        0.0,
        0.0,
        0.0,
        1.0,
        0.0,
        this.x,
        this.y,
        this.z,
        1.0,
      ]);

      this.tileset = this.viewer.scene.primitives.add(
        new Cesium.Cesium3DTileset({
          url: "./../static/Scene/testm3DTiles.json",
          maximumScreenSpaceError: 2,
          maximumNumberOfLoadedTiles: 1000,
          modelMatrix: this.m, //方法一，动态修改modelMatrix
        })
      );

      var boundingSphere =
        null; // = new Cesium.BoundingSphere(Cesium.Cartesian3.fromDegrees(111.5652101, 38.70350851, 100.500143), 143.6271004);

      function zoomToTileset() {
        boundingSphere = this.tileset.boundingSphere;
        this.viewer.camera.viewBoundingSphere(
          boundingSphere,
          new Cesium.HeadingPitchRange(0, -2.0, 0)
        );
        this.viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);

        //changeHeight(0);
      }

      this.tileset.readyPromise.then(zoomToTileset);
      // scene.morphComplete.addEventListener(zoomToTileset);
      // var step = 10;

      // function changeStep(stepin) {
      //   step = stepin;
      // }
      document.getElementById("result").innerText =
        "rotationnum：" +
        this.rotationNum +
        " x:" +
        this.x +
        " y:" +
        this.y +
        " z:" +
        this.z;

      this.viewerTemp = this.viewer;
    },
    methods: {
      changeStep(stepin) {
        this.step = stepin;
      },
      change(type) {
        switch (type) {
          case 0:
            this.x += this.step;
            break;
          case 1:
            this.x -= this.step;
            break;
          case 2:
            this.y += this.step;
            break;
          case 3:
            this.y -= this.step;
            break;
          case 4:
            this.z += this.step;
            break;
          case 5:
            this.z -= this.step;
            break;
        }

        //创建平移矩阵方法一
        // m = Cesium.Matrix4.fromArray([
        //     1.0, 0.0, 0.0, 0.0,
        //     0.0, 1.0, 0.0, 0.0,
        //     0.0, 0.0, 1.0, 0.0,
        //     x, y, z, 1.0
        // ]);

        //创建平移矩阵方法二
        var translation = Cesium.Cartesian3.fromArray([this.x, this.y, this.z]);
        this.m = Cesium.Matrix4.fromTranslation(translation);

        document.getElementById("result").innerText =
          "rotationnum：" +
          this.rotationNum +
          " x:" +
          this.x +
          " y:" +
          this.y +
          " z:" +
          this.z;

        this.tileset.modelMatrix = this.m;
      },

      changevisible() {
        this.tileset.show = !this.tileset.show;
      },

      //方法二，直接调用函数，调整高度,height表示物体离地面的高度
      changeHeight(height) {
        height = Number(height);
        if (isNaN(height)) {
          return;
        }

        var cartographic = Cesium.Cartographic.fromCartesian(
          this.tileset.boundingSphere.center
        );
        var surface = Cesium.Cartesian3.fromRadians(
          cartographic.longitude,
          cartographic.latitude,
          cartographic.height
        );
        var offset = Cesium.Cartesian3.fromRadians(
          cartographic.longitude,
          cartographic.latitude,
          height
        );
        var translation = Cesium.Cartesian3.subtract(
          offset,
          surface,
          new Cesium.Cartesian3()
        );
        this.tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
      },
      rotate(type) {
        switch (type) {
          case 0:
            this.rotationNum += this.step;
            break;
          case 1:
            this.rotationNum -= this.step;
            break;
        }

        var boundingSphere = this.tileset.boundingSphere;
        var cartographic = Cesium.Cartographic.fromCartesian(boundingSphere.center);
        var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0);
        var position = surface
        console.log('旋转角度', this.rotationNum)
        //debugger

        var enti = this.viewer.entities.add({//创建位置
          position: position,
          point: {
            pixelSize: 8,
            color: Cesium.Color.TRANSPARENT,
            outlineColor: Cesium.Color.YELLOW,
            outlineWidth: 3
          },
          label: {
            text: '位置',
            font: '24pt sans-serif',
            style: Cesium.LabelStyle.FILL_AND_OUTLINE, //FILL  FILL_AND_OUTLINE OUTLINE
            fillColor: Cesium.Color.RED,
            outlineColor: Cesium.Color.WHITE,
            outlineWidth: 1,
            horizontalOrigin: Cesium.HorizontalOrigin.LEFT, // CENTER LEFT RIGHT
            verticalOrigin: Cesium.VerticalOrigin.BASELINE, //BASELINE BOTTOM CENTER TOP
            pixelOffset: new Cesium.Cartesian2(10, 0) //指定像素偏移量的属性
          }
        });

        //this.viewer.trackedEntity = enti;
        this.TestRoate()
        this.zoomToTileset();

        // var rotation = Cesium.Matrix3.fromRotationX(
        //   Cesium.Math.toRadians(this.rotationNum)
        // );
        // var m4 = this.tileset.modelMatrix;
        // Cesium.Matrix4.multiplyByMatrix3(m4, rotation, m4);
        // this.tileset.modelMatrix = m4;

        // var translation = Cesium.Cartesian3.fromArray([this.x, this.y, this.z]);
        // this.m = Cesium.Matrix4.fromRotationTranslation(rotation, translation);
        // this.tileset.modelMatrix = this.m;


        // console.log(Cesium.Matrix4.IDENTITY);
        // this.viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
        // this.tileset.readyPromise.then(this.zoomToTileset);
        document.getElementById("result").innerText =
          "rotationnum：" +
          this.rotationNum +
          " x:" +
          this.x +
          " y:" +
          this.y +
          " z:" +
          this.z;
      },

      zoomToTileset() {
        var boundingSphere = this.tileset.boundingSphere;
        // this.viewer.camera.viewBoundingSphere(
        //   boundingSphere,
        //   new Cesium.HeadingPitchRange(0, -2.0, 0)
        // );
        this.viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
        this.viewer.camera.flyToBoundingSphere(boundingSphere);

        //changeHeight(0);
      },

      TestRoate() {
        let params = {
          rx: 0,
          ry: this.rotationNum,
          rz: 0
        }
        // let orientation = this.tileset.orientation;
        // console.log('orientation',orientation)
        // let angle = Cesium.Quaternion.fromAxisAngle(new Cesium.Cartesian3(0, 0, 1), Cesium.Math.toRadians(90))
        // let rotation = Cesium.Matrix3.fromQuaternion(orientation, new Cesium.Matrix3)
        // Cesium.Matrix4.multiply(this.tileset.modelMatrix, rotation, this.tileset.modelMatrix)
        // return
        //console.log(' this.tileset', this.tileset.modelMatrix)

        var boundingSphere = this.tileset.boundingSphere;
        var cartographic = Cesium.Cartographic.fromCartesian(boundingSphere.center);
        var ptCenter = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0);

        //旋转
        let mx = Cesium.Matrix3.fromRotationX(Cesium.Math.toRadians(params.rx));
        let my = Cesium.Matrix3.fromRotationY(Cesium.Math.toRadians(params.ry));
        let mz = Cesium.Matrix3.fromRotationZ(Cesium.Math.toRadians(params.rz));
        let rotationX = Cesium.Matrix4.fromRotationTranslation(mx);
        let rotationY = Cesium.Matrix4.fromRotationTranslation(my);
        let rotationZ = Cesium.Matrix4.fromRotationTranslation(mz);

        //平移
        let position = Cesium.Cartesian3.fromDegrees(this.x, this.y, this.z);
        //let m = Cesium.Transforms.eastNorthUpToFixedFrame(position);

        let m = this.tileset.modelMatrix;

        let scale = Cesium.Matrix4.fromUniformScale(0.85);
        //缩放
        //Cesium.Matrix4.multiply(m, scale, m);

        //旋转、平移矩阵相乘
        Cesium.Matrix4.multiply(m, rotationX, m);
        Cesium.Matrix4.multiply(m, rotationY, m);
        Cesium.Matrix4.multiply(m, rotationZ, m);

        console.log('m4', this.tileset.modelMatrix, m)
        this.tileset.modelMatrix = m
        //赋值给tileset
        return m;
      },

    },
  };
</script>

<style>
  html,
  body,
  #cesiumContainer {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }

  #getposition {
    position: absolute;
    top: 0;
    left: 0;
    width: 300px;
    height: 600px;
    background-color: gray;
  }
</style>
